<template>
  <div class="taolun-detail">
    <el-dialog
      title="录入领导批示"
      :visible.sync="dialogVisible"
      width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form
          ref="form"
          :model="shanghuiForm"
          label-width="120px"
          label-position="right"
          size="small">
          <el-form-item label="时间">
            <el-col :span="18">
              <el-date-picker type="date" placeholder="选择时间" v-model="shanghuiForm.date" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-col :span="19">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-success="handleUploadSucc"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :multiple="false"
                :limit="100"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">每次只能选择一个文件</div>
              </el-upload>
            </el-col>
          </el-form-item>
          <el-form-item label="部长批示">
            <el-col :span="18">
              <el-input type="textarea" v-model="shanghuiForm.buzhang"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="分管部领导批示">
            <el-col :span="18">
              <el-input type="textarea" v-model="shanghuiForm.fenguan"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="司长批示">
            <el-col :span="18">
              <el-input type="textarea" v-model="shanghuiForm.sizhang"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="marginT10" @click="ShSubmit">保存</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog
      title="会议信息录入"
      :visible.sync="dialogVisible2"
      width="60%">
      <el-table
        border
        size="small"
        :data="tableData4"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="company"
          label="单位"
          width="240">
        </el-table-column>
        <el-table-column
          property="position"
          label="岗位"
          width="240">
        </el-table-column>
        <el-table-column
          property="name"
          label="人选"
          width="240">
        </el-table-column>
        <el-table-column label="审定情况">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.radio">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">未通过</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
      <el-form :model="entryForm" class="marginT15">
        <el-form-item label="">
          <el-col class="textC" :span="1">第</el-col>
          <el-col :span="3">
            <el-input-number v-model="entryForm.num" :min="0"></el-input-number>
          </el-col>
          <el-col class="textC" :span="1">次</el-col>
          <el-col :span="3">
            <el-select v-model="entryForm.selValue" placeholder="请选择会议类型">
              <el-option
                v-for="item in selOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3" class="marginL8">
            <el-date-picker
              v-model="entryForm.date"
              align="right"
              type="date"
              placeholder="选择日期" value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-col :span="8">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="entryForm.textarea">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上传会议纪要">
          <el-col :span="8">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList2">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">请选择</div>
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2">讨论决定完成，进入下一环节</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="批示意见/办理提示"
      :visible.sync="dialogVisible3"
      width="60%">
      <sel-notice :noticePersonId="noticePersonId" step=""></sel-notice>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待提请审议" name="first">
        <el-col :span="18">
          <el-table
            border
            size="small"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              prop="company"
              label="单位"
              width="180">
            </el-table-column>
            <el-table-column
              prop="gangwei"
              label="岗位"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="人选"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-button class="marginT10" type="primary" @click="handleBaobuClick">报部</el-button>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="待上会审议" name="second">
        <el-table
          border
          size="small"
          ref="multipleTable"
          :data="tableData2"
          tooltip-effect="dark"
          style="width: 80%">
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="persions"
            label="人选">
            <template slot-scope="scope">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item, idx) of scope.row.persions" :key="idx" :label="item.name" :disabled="item.dis"></el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick2(scope.row)" type="primary" size="small">导出签报模板</el-button>
              <el-button type="primary" size="small" class="marginL8" @click="handleClick3(scope.row)">录入领导批示</el-button>
              <el-button type="danger" size="small" class="marginL8">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="marginT10" type="primary" @click="handleShanghuiClick">上会</el-button>
      </el-tab-pane>
      <el-tab-pane label="会议审议" name="third">
        <el-table
          border
          size="small"
          ref="singleTable"
          :data="tableData3"
          style="width: 80%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            property="name"
            label="人选"
            width="240">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="exMoban(scope.$index, scope.row)">导出党组会材料模板</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="entryMsg(scope.$index, scope.row)">录入会议信息</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fline"></div>
      </el-tab-pane>
      <el-tab-pane label="讨论决定完成" name="fourth">
        <el-table
          row-key="id"
          :data="tableData5"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="company"
            label="单位"
            width="180">
          </el-table-column>
          <el-table-column
            prop="position"
            label="岗位"
            width="180"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="name"
            label="人选"
            width="180">
          </el-table-column>
          <el-table-column label="查看详情">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">查看报部信息</el-button>
              <el-button
                size="small"
                type="primary"
                @click="handleDelete(scope.$index, scope.row)">会议审议信息</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="opera">
            <template slot-scope="scope">
              <el-checkbox-group v-model="scope.row.opera">
                <el-checkbox label="1" :key="111">是否公示</el-checkbox>
                <el-checkbox label="2" :key="222">是否向中组部备案</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
        <select-group :selectData="selectData"></select-group>
      </el-tab-pane>
      <el-tab-pane label="已退回" name="five">
        <el-table
          row-key="id"
          :data="tableData5"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="company"
            label="单位"
            width="130">
          </el-table-column>
          <el-table-column
            prop="position"
            label="岗位"
            width="130"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="name"
            label="人选"
            width="130">
          </el-table-column>
          <el-table-column label="查看详情">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">查看报部信息</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleDelete(scope.$index, scope.row)">会议审议信息</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="tuihuiPS(scope.$index, scope.row)">批示信息</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="opera">
            <template slot-scope="scope">
              <el-checkbox-group v-model="scope.row.opera">
                <el-checkbox label="1" :key="111">是否公示</el-checkbox>
                <el-checkbox label="2" :key="222">是否向中组部备案</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
        <select-group :selectData="selectData"></select-group>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import selectGroup from '../common/SelectGroup'

export default {
  name: 'taolun-detail',
  components: {
    selectGroup
  },
  data () {
    return {
      activeName: 'first',
      tableData: [
        {
          company: '经济研究院',
          name: '王某某',
          gangwei: '人事处 副处长'
        },
        {
          company: '经济研究院',
          name: '张某某',
          gangwei: '科研所 副处长'
        }
      ],
      tableData2: [
        {
          persions: [
            {
              name: '张某某',
              id: '001'
            },
            {
              name: '留某某',
              dis: true,
              id: '002'
            },
            {
              name: '孙某某',
              id: '003'
            }
          ]
        },
        {
          persions: [
            {
              name: '照某某',
              id: '004'
            },
            {
              name: '杨某某',
              id: '005'
            }
          ]
        }
      ],
      tableData3: [
        {
          name: '张某某 王某某 赵某某'
        },
        {
          name: '李某某 钱某某'
        }
      ],
      tableData4: [
        {
          company: '经济研究院',
          position: '人事处 副处长',
          name: '张某某',
          radio: '1'
        },
        {
          company: '经济研究院',
          position: '科技处 副处长',
          name: '李某某',
          radio: '2'
        }
      ],
      tableData5: [
        {
          company: '经济研究院',
          id: '00001',
          position: '人事处 副处长',
          name: '张某某',
          opera: []
        },
        {
          company: '经济研究院',
          id: '00011',
          position: '科技处 副处长',
          name: '李某某',
          opera: []
        }
      ],
      multipleSelection: [],
      checkList: [],
      checkList2: [],
      shanghuiForm: {
        date: '',
        buzhang: '',
        fenguan: '',
        sizhang: ''
      },
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      fileList2: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      entryForm: {
        num: 0,
        selValue: '',
        date: '',
        textarea: '',
        radio: ''
      },
      selOptions: [{
        value: '1',
        label: '党组会'
      }, {
        value: '2',
        label: '司办会'
      }],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }]
      },
      date: '',
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        cnData: [
        ],
        yyData: []
      },
      noticePersonId: '', // notice persion id
      dialogVisible: false, // 录入领导批示
      dialogVisible2: false, // 录入会议信息
      dialogVisible3: false // 退回批示
    }
  },
  methods: {
    loadSelectData () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=1`)
        .then(response => {
          if (response.data.success) {
            this.selectData.hjData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.szData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=5`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleSelectionChange (val) { // 待提请审议
      console.log('table data val:', val)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleClick2 (val) {
      console.log(val)
    },
    handleClick3 (val) {
      console.log(val)
      this.dialogVisible = true
    },
    handleBaobuClick () {
      console.log('click baobu')
    },
    handleShanghuiClick () {
      console.log('click shanghui')
      console.log(this.checkList)
    },
    handleUploadSucc (response, file, fileList) {
      console.log(response, file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 100 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm('确定移除？')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleRemove2 (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed2 (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove2 (file, fileList) {
      return this.$confirm('确定移除？')
    },
    exMoban () {
      console.log('导出党组会模板')
    },
    entryMsg () {
      console.log('录入信息')
      this.dialogVisible2 = true
    },
    ShSubmit () {
      console.log('submit data', this.shanghuiForm)
    },
    onSubmit2 () {
      console.log('submit data', this.shanghuiForm)
    },
    tuihuiPS (val) {
      this.dialogVisible3 = true
    }
  },
  mounted () {
    this.loadSelectData()
    let params = this.$route.params
    console.log('讨论决定详情params:', params)
  }
}
</script>

<style scoped>
.taolun-detail {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
